<template>
	<view class="app">
		<view class="top">
			<view class="left">
				<view class="title">{{titleName}}</view>
				<view class="num">{{balance}}</view>
			</view>
			<!-- <image src="/static/ico-45.png" class="rightimg"></image> -->
		</view>
		<view style="display: flex;justify-content: center;">
			<image v-for="(item,index) in rechargeList" :key="index" :src="$fun.imgUrl(item)" @click="lookImg(item)"
				style="width: 200rpx;height: 200rpx;margin: 10rpx auto;" mode=""></image>
		</view>

		<view class="cell">
			<text class="tit fill">姓名</text>
			<input class="input" v-model="name" type="text" maxlength="11" placeholder="请输入真实姓名"
				placeholder-style="color:#999;font-size:30rpx" />
		</view>

		<view class="cell">
			<text class="tit fill">手机号</text>
			<input class="input" v-model="phone" type="number" maxlength="11" placeholder="请输入手机号"
				placeholder-style="color:#999;font-size:30rpx" />
		</view>

		<view class="cell nocell">
			<text class="tit fill">充值金额</text>
		</view>

		<view class="conter">
			<view class="cent">
				<block v-for="(item,index) in moneyList">
					<view v-if="item!=''" :class="currentIndex==index ? 'active list' : 'list'"
						@click="checkePrice(item,index)">
						{{item}}
						<image class="" src="/static/ico-46.png" v-if="currentIndex==index"
							style="right:-1px;bottom:-1px;"></image>
					</view>
					<view v-else :class="currentIndex==index ? 'active list' : 'list'">
						<input type="number" style="color: #000000;" v-model="money1" placeholder="自定义"
							@focus="currentIndex=index" />
						<image class="" src="/static/ico-46.png" v-if="currentIndex==index"
							style="right:-1px;bottom:-1px;"></image>
					</view>
				</block>
			</view>
		</view>
		<view class="cell nocell">
			<text class="tit fill">充值凭证截图</text>
		</view>

		<view class="cell nocell" style="margin-bottom: 100rpx;">
			<image :src="image?image:'/static/ico-101.png'" @click="upload_img()" style="width: 150rpx;height:150rpx;"
				mode=""></image>
		</view>
		<button class="add-btn" @click="confirm()"
			style="background-color: #5990FF !important;color: #FFFFFF;">提交</button>

		<!-- 		<s-popup custom-class="demo-popup" position="center" v-model="visible">
			<image :src="$imgUrl(recharge)" mode=""></image>
		</s-popup> -->
	</view>
</template>

<script>
	// import sPopup from '@/components/s-ui/s-popup/index.vue';
	export default {
		// components: {
		// 	sPopup
		// },
		data() {
			return {
				visible: false,
				// 支付方式
				curType: 'wxpay',
				showPwd: false,
				moneyList: [],
				name: '',
				phone: '',
				money: "", //列表金额
				money1: '', //其他金额
				image: '', //充值图片
				id: '',
				recharge: '',
				rechargeList: '',
				titleName: '', //标题
				currentIndex: 0,
				balance: '==',
				type: ''
			}
		},
		computed: {
			// openExamine() {
			// 	return this.$store.state.openExamine;
			// }
		},
		watch: {
			money(val) {
				if (val) {
					this.money1 = ''
				}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.titleName = options.name
			this.titleName = options.name
			this.type = options.type
			this.$fun.ajax.post('config/recharge', {
				id: options.id,
				type: options.type
			}).then(res => {
				this.rechargeList = res.data.recharge
				this.balance = res.data.money
				this.moneyList = res.data.money_arr
				this.money = res.data.money_arr[0]
			})
		},
		methods: {
			confirm() {
				let {
					name,
					id,
					phone,
					money,
					image,
					type
				} = this
				let prams = {
					name,
					id,
					phone,
					money,
					image,
					type
				}
				if (this.money1 != '') {
					prams.money = this.money1
				}
				if (!name) {
					this.$fun.msg('请输入真实姓名');
					return
				}
				if (!phone) {
					this.$fun.msg('请输入手机号');
					return
				}
				if (!money) {
					this.$fun.msg('请输入充值金额');
					return
				}
				if (!image) {
					this.$fun.msg('请上传充值截图');
					return
				}
				this.$fun.ajax.post('user/recharge', {
					...prams
				}).then(res => {
					if (res.code == 1) {
						this.$fun.msg(res.msg)
						this.$fun.jump('', 4, 1200)
					}
				})
			},
			lookImg(item) {
				uni.previewImage({
					urls: [this.$fun.imgUrl(item)] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			// 上传图片
			upload_img() {
				let _this = this
				uni.chooseImage({
					count: 1,
					success: res => {
						let tempFilePaths = res.tempFilePaths[0]
						//console.log(tempFilePaths)
						uni.uploadFile({
							url: this.$baseUrl + '/api/common/upload', // 仅为示例，非真实的接口地址 
							filePath: tempFilePaths,
							name: 'file',
							header: {
								token: uni.getStorageSync('token')
							},
							success(res) {
								//console.log(res.data)
								var res = JSON.parse(res.data)
								_this.image = res.data.fullurl
								uni.showToast({
									title: "上传成功",
									icon: "none"
								});
							},
						})
					}
				})
			},
			//微信支付
			async wxpay(money) {
				const res = await this.$request('payment', 'recharge', {
					money: +money,
					pay_type: 'wxpay',
					// #ifdef MP-WEIXIN
					code: await this.getMpCode('weixin'),
					// #endif
				}, {
					showLoading: true
				})

				this.log(res)
				if (res.status !== 1) {
					this.$refs.confirmBtn.stop();
					this.$util.msg(res.msg);
					return;
				}
				const orderInfo = res.data.orderInfo;
				const {
					timeStamp,
					nonceStr,
					paySign
				} = orderInfo;
				const payParams = {
					provider: this.curType,
					orderInfo: res.data.orderInfo,
					timeStamp,
					nonceStr,
					package: orderInfo.package,
					signType: 'MD5',
					paySign,
					success: e => {
						this.payPrice = money;
						this.$refs.confirmBtn.death();
						this.$refs.successModal.open();
					},
					fail: err => {
						this.$refs.confirmBtn.stop();
						if (err.errMsg.indexOf('取消') > -1 || err.errMsg.indexOf('cancel') > 1 || err.errMsg
							.indexOf('-2') > -1) {
							this.$util.msg('取消支付');
						} else {
							this.$util.msg('支付遇到错误，请稍候重试');
							//console.log(err);
						}
					}
				};
				uni.requestPayment(payParams);
			},
			//统一支付回调
			successCallback() {
				this.$store.dispatch('getUserInfo');
				uni.navigateBack();
			},
			checkePrice(item, index) {
				this.money = item;
				this.currentIndex = index
				// //console.log(this.moneyList)
			},
			checkType(type) {
				this.curType = type;
			},
			//获取小程序code
			// #ifdef MP
			getMpCode(provider) {
				return new Promise((resolve) => {
					uni.login({
						provider,
						success(res) {
							resolve(res.code)
						}
					})
				})
			}
			// #endif
		},
		onNavigationBarButtonTap(e) {
			const index = e.index;
			// #ifdef APP-PLUS
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			currentWebview.hideTitleNViewButtonRedDot({
				index
			});
			// #endif
			uni.navigateTo({
				url: `./onchargecostList?id=${this.id}&name=${this.titleName}`
			})
		}

	}
</script>

<style scoped lang="scss">
	.app {
		padding: 20rpx;

		/* 头部 */
		.top {
			display: flex;
			justify-content: space-between;
			margin-left: 20rpx;

			.left {
				margin-top: 40rpx;

				.title {
					font-size: 24rpx;
					color: #666;
				}

				.num {
					font-size: 48rpx;
					color: #000;
					margin-top: 30rpx;
					font-weight: bold;
				}

				.jyjl {
					font-size: 24rpx;
					color: #5990FF;
					margin-top: 50rpx;
				}
			}

			.rightimg {
				width: 233rpx;
				height: 240rpx;
				margin-right: 50rpx;
			}
		}

		/* 内容区 */
		.conter {
			.title {
				color: #666;
				margin-top: 50rpx;
				font-size: 30rpx;
			}

			.cent {
				margin-top: 25rpx;
				overflow: hidden;

				.list {
					width: 200rpx;
					height: 120rpx;
					border: 1rpx solid #e8e8e8;
					float: left;
					margin: 0 18rpx;
					margin-bottom: 45rpx;
					position: relative;
					text-align: center;
					line-height: 120rpx;
					border-radius: 15rpx;

					// &:nth-child(3n) {
					// 	margin-right: 0;
					// }

					input {
						height: 50rpx;
						margin-left: 10rpx;
						margin-top: 35rpx;
					}

					.van-cell {
						padding: 0;
						width: 180rpx;
					}

					image {
						width: 40rpx;
						height: 37rpx;
						position: absolute;
						bottom: 0;
						right: 0;
						display: none;
					}

					&.active {
						color: #5990FF;
						border: 1rpx solid #5990FF;

						image {
							display: block;
						}
					}
				}
			}
		}

		.bottom {
			width: 690rpx;

			.text {
				margin-bottom: 30rpx;
				display: flex;
				font-size: 24rpx;
				line-height: 40rpx;

				.van-checkbox {}

				navigator {
					color: #5990FF;
				}
			}

			button {
				width: 690rpx;
				height: 78rpx;
				line-height: 78rpx;
				background: #5990FF;
				color: #fff;
				border-radius: 78rpx;
				font-weight: 500;
				margin: 0;
				padding: 0;
			}
		}
	}



	.conter {
		text-align: center;
	}

	.imgewm {
		width: 351rpx;
		height: 350rpx;
		border-radius: 20rpx;
		margin: 0 auto;
	}

	.nocell {
		border-bottom: none !important;
	}

	.cell {
		display: flex;
		align-items: center;
		min-height: 110rpx;
		margin: 0 40rpx;
		border-bottom: 1px solid rgb(236, 236, 236);

		&:first-child {
			margin-bottom: 10rpx;
		}

		&:after {
			left: 40rpx;
			right: 40rpx;
			border-color: #d8d8d8;
		}

		.tit {
			font-size: 30rpx;
			color: #333;
		}

		.avatar-wrap {
			width: 120rpx;
			height: 120rpx;
			position: relative;
			border-radius: 100rpx;
			overflow: hidden;

			.avatar {
				width: 100%;
				height: 100%;
				border-radius: 100rpx;
			}

			.progress {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 100rpx;
				height: 100rpx;
				box-shadow: rgba(0, 0, 0, .6) 0px 0px 0px 2005px;
				border-radius: 100rpx;
				transition: .5s;
				opacity: 0;

				&.no-transtion {
					transition: 0s;
				}

				&.show {
					opacity: 1;
				}
			}
		}

		.input {
			flex: 1;
			text-align: right;
			font-size: 28rpx;
			color: #333;
		}

		switch {
			margin: 0;
			transform: scale(0.8) translateX(10rpx);
			transform-origin: center right;
		}

		.tip {
			margin-left: 20rpx;
			font-size: 28rpx;
			color: #999;
		}

		.checkbox {
			padding: 12rpx 0 12rpx 40rpx;
			font-size: 28rpx;
			color: #333;

			.mix-icon {
				margin-right: 12rpx;
				font-size: 36rpx;
				color: #ccc;
			}

			.icon-xuanzhong {
				color: $base-color;
			}
		}
	}
</style>